<iframe th:replace="common/top.html" width="100%" frameborder="0" scrolling="yes" class="x-iframe"></iframe>
<link rel="StyleSheet" href="../css/product.css" type="text/css" media="screen"/>
<link rel="StyleSheet" href="css/orderstatus.css" type="text/css" media="screen"/>

<!--<link rel="StyleSheet" href="../css/mypetstore.css" type="text/css" media="screen"/>-->
<div id="Catalog">
    <!-- 覆盖层 -->
    <div class="login-bg"></div>
    <div class="new_item_detail">
        <span class="close">x</span>
        <div class="bar">请输入新的Item的信息</div>

        <form action="/catalog/addItem" method="post">
            <ul class="detailList">
                <li class="item">itemid:<input type="text" class="itemid" name="itemId" required></li>
                <li class="item">productid:<input type="text" class="productid" name="productId" readonly th:value="${product.productId}"></li>
                <li class="item">listprice:<input type="text" class="listprice" name="listPrice" required></li>
                <li class="item">unitcost:<input type="text" class="unitcost" name="unitCost" required></li>
<!--                <li class="item">supplier:<input type="text" class="supplier" name="supplier" required></li>-->
                <li class="item">supplier:
                    <select class="supplier" name="supplier">
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </li>
                <li class="item">status:<input type="text" class="status" name="status" required></li>
                <li class="item">attr1:<input type="text" class="attr1" name="attr1"></li>
                <li class="item">attr2:<input type="text" class="attr2" name="attr2"></li>
                <li class="item">attr3:<input type="text" class="attr3" name="attr3"></li>
                <li class="item">attr4:<input type="text" class="attr4" name="attr4"></li>
                <li class="item">attr5:<input type="text" class="attr5" name="attr5"></li>
                <li class="item">amount:<input type="text" class="amount" name="amount" required></li>
            </ul>

          <div class="button-container"><button type="submit" id="add">添加Item</button></div>
<!--            <button type="button" class="cancel">取消</button>-->
        </form>
    </div>
    <h2 th:text="${product.name}" class="productName" style="text-align: center"></h2>
    <table id="itemListTable">
        <tr>
            <th>商品编号</th>
            <th>种类编号</th>
            <th>描述</th>
            <th>单价</th>
            <th colspan="2">操作</th>
        </tr>
        <tr th:each="item:${items}">
            <td th:text="${item.itemId}">
<!--                <a th:href="@{itemForm(itemId=${item.itemId})}" th:text="${item.itemId}"></a>-->
            </td>
            <td th:text="${product.productId}"></td>
            <td th:text="${item.attribute1}+${(item.attribute2!=null)?item.attribute2:''}+${(item.attribute3!=null)?item.attribute3:''}+
          ${(item.attribute4!=null)?item.attribute4:''}+${(item.attribute5!=null)?item.attribute5:''}+${product.name}"></td>

            <td th:with="num=${item.listPrice}" th:utext="${#numbers.formatCurrency(num)}">
            </td>

            <td>
                <a th:href="@{/catalog/item(itemId=${item.itemId})}" class="button">修改item信息</a>
            </td>
        </tr>

        <!--    th:each结束-->
    </table>
    <div class="button-container">
        <a href="javascript:;" id="addNewItem" class="button">添加新的Item</a>

    </div>
<!--    <div>-->
<!--        <a href="javascript:;" id="addNewItem" class="button">添加新的Item</a>-->
<!--    </div>-->

    <script src="../js/product.js" type="text/javascript"></script>
</div>

<iframe th:replace="common/bottom.html" width="100%" frameborder="0" scrolling="yes" class="x-iframe"></iframe>






